<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>前后端交互</title>
		<script src="../jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			$(function(){
				/**data参数传递：
				*1. 对象方式实现参数传递
				* 	语法：{K1:V1,K2:V2,K3:V3}
				*2. 拼接字符串的方式
				* 	语法：K1=V1&K2=V2&K3=V3
				*/
				$.ajax({
					type:"get",
					url:"http://localhost:8090/findAll",
					//data:{id:100,name:"tom",age:18}
					//data:"id=100&name&tom&age=18",
					success:function (data){
						//console.log(data);--控制台打印的是数组

						//1. for (var i=0;i<data.length;i++){
						// 	console.log(data[i]);
						// }

						//2. JS原生函数 in关键字遍历的是下标index
						// for (index in data){
						// 	console.log(data[index]);
						// }

						//3. JS原生函数 of关键字遍历的是对象
						// for (user of data){
						// 	console.log(user);
						// }

						// for (user of data){
						// 	let id = user.id
                        //     let name = user.name
                        //     let age = user.age
                        //     let sex = user.sex
                        //     let tr = "<tr><td>"+id+"</td><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td></tr>"
						// }

                        //``模板
                        for (user of data){
                            let tr = `
                                <tr align="center">
                                    <td>${user.id}</td>
                                    <td>${user.name}</td>
                                    <td>${user.age}</td>
                                    <td>${user.sex}</td>
                                    <td>
                                    <a href="">修改</a>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <a href="">保存</a>
                                    </td>
                                </tr>
                            `
                        $("#tab1").append(tr)
                        }
					}
				})
			})

		</script>
	</head>
	<body>
		<table id="tab1" border="1px"  width="50%" align="center" bordercolor="#7fffd4" cellspacing="0" >
			<tr  align="center" height="60px">
				<td colspan="5"><h1>用户列表</h1></td>
			</tr>
			<tr>
				<th>编号</th>
				<th>名称</th>
				<th>年龄</th>
				<th>性别</th>
				<th>操作</th>
			</tr>
		</table>
	</body>
</html>
